<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '#' }">
                运动会比赛成绩管理
            </el-breadcrumb-item>
            <el-breadcrumb-item>
                <a href="#">破纪录统计公告</a>
            </el-breadcrumb-item>
        </el-breadcrumb>

        <el-card class="por-card">
            <div class="por-select">
                <div class="por_group">
                    <el-form>
                        <el-form-item label="组别：">
                            <el-select v-model="porgroup">
                                <el-option label="综合" :value=0></el-option>
                                <el-option v-for="item in groupData" :key="item.grid" :label="item.name"
                                    :value="item.grid"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="por_sex">
                    <el-form label-width="70">
                        <el-form-item label="性别：">
                            <el-select class="select_sex" v-model="porsex">
                                <el-option label=" " :value=0></el-option>
                                <el-option v-for="item in sexData" :key="item.sex" :label="item.sxname"
                                    :value="item.sex"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="por_records">
                    <el-form label-width="90">
                        <el-form-item label="加分模式：">
                            <el-select v-model="poraddpoints">
                                <el-option label="每个项目加分" value="1"></el-option>
                                <el-option label="每个记录加分" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
                <!-- <el-col :span="2">
                    <el-button type="warning">统计</el-button>
                </el-col> -->
                <div class="por_expor">
                    <el-button type="primary" @click="exportExcel">导出</el-button>
                </div>
                <div class="cosp6">
                    <el-button type="primary" @click="highestGradeExcel">最高成绩</el-button>
                </div>
            </div>

            <el-table :data="porData" border stripe>
                <el-table-column prop="gridName" label="比赛组">
                </el-table-column>
                <el-table-column prop="sexName" label="性别">
                </el-table-column>
                <el-table-column prop="msidName" label="项目">
                </el-table-column>
                <el-table-column prop="stidName" label="赛次">
                </el-table-column>
                <el-table-column prop="plid1Name" label="姓名">
                </el-table-column>
                <el-table-column prop="teamName" label="单位">
                </el-table-column>
                <el-table-column prop="scoreTime" label="成绩">
                    <template #default="scope">
                        {{ scope.row.scoreTime === "00:00:00.000" ? "" : scope.row.scoreTime }}
                    </template>
                </el-table-column>
                <el-table-column prop="rmark" label="记录名">
                </el-table-column>
                <el-table-column prop="startdate" label="日期">
                </el-table-column>
                <el-table-column prop="original" label="原纪录">
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script>
import XLSX from 'xlsx'
export default {
    components: {
        XLSX,
    },
    data() {
        return {
            porgroup: 0,
            porsex: 0,
            poraddpoints: '1',
            porData: [],
            groupData: [],
            sexData: [],
            targetObject: '',
        }
    },
    created() {
        this.postGroupinfoList();
        this.posttSexinfoList();
        this.getporinfoList();
    },
    methods: {
        async postGroupinfoList() {
            const result = await this.$http.post(this.BACKEND_URL + '/match/getGroupmsg');
            if (result.data.code == 0) {
                this.groupData = result.data.data
            } else if (result.data.code == 500) {
                console.log(result.data.msg)
            }
        },
        async posttSexinfoList() {
            const result = await this.$http.post(this.BACKEND_URL + '/match/getmsg');
            if (result.data.code == 0) {
                this.sexData = result.data.data
            } else if (result.data.code == 500) {
                console.log(result.data.msg)
            }
        },
        async getporinfoList() { // 数据
            try {
                const result = await this.$http.get(this.BACKEND_URL + '/break/getmsg', {
                    params: {
                        grid: this.porgroup,
                        sex: this.porsex
                    }
                })
                if (result.data.code == 0) {
                    this.porData = result.data.data
                } else if (result.data.code == 500) {
                    console.log(result.data.msg)
                }
            } catch (error) {
                if (error === undefined) {
                    this.$message.error('连接错误-获取数据失败');
                }
            }
        },
        // 导出
        async exportExcel() {
            if (this.porgroup === 0) {
                this.targetObject = '综合'
            } else {
                for (let i = 0; i < this.groupData.length; i++) {
                    if (this.groupData[i].grid === this.porgroup) {
                        this.targetObject = this.groupData[i].name
                    }
                }
            }
            try {
                const result = await this.$http.get(this.BACKEND_URL + '/break/export', {
                    params: {
                        grid: this.porgroup,
                        sex: this.porsex
                    },
                    responseType: 'blob',
                });
                let downloadUrl = window.URL.createObjectURL(new Blob([result.data]));

                const link = document.createElement('a');
                link.href = downloadUrl;
                link.setAttribute('download', '破纪录统计公告(' + this.targetObject + ').xlsx');
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            } catch (error) {
                console.error('File export failed:', error);
            }
        },
        // 最高成绩表格
        async highestGradeExcel() {
            if (this.porgroup === 0) {
                this.targetObject = '综合'
            } else {
                for (let i = 0; i < this.groupData.length; i++) {
                    if (this.groupData[i].grid === this.porgroup) {
                        this.targetObject = this.groupData[i].name
                    }
                }
            }
            try {
                const result = await this.$http.get(this.BACKEND_URL + '/break/export1', {
                    params: {
                        grid: this.porgroup,
                        sex: this.porsex
                    },
                    responseType: 'blob',
                });
                console.log(result)
                let downloadUrl = window.URL.createObjectURL(new Blob([result.data]));

                const link = document.createElement('a');
                link.href = downloadUrl;
                link.setAttribute('download', '最高成绩公告(' + this.targetObject + ').xlsx');
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            } catch (error) {
                console.error('File export failed:', error);
            }
        }
    },
    watch: {
        porgroup(newGroupName, oldGroupName) {
            if (newGroupName !== oldGroupName) {
                this.getporinfoList();
            }
        },
        porsex(newGroupName, oldGroupName) {
            if (newGroupName !== oldGroupName) {
                this.getporinfoList();
            }
        },
    }
}
</script>

<style lang="less" scoped>
.por-card {
    margin-top: 15px;

    .cosp6 {
        flex: 1;
        text-align: right;
    }

    .select_sex {
        width: 100px;
    }
}
.por-select{
    display: flex;
    .por_group{
        width: 140px;
    }
    .por_sex{
        width: 160px;
    }
    .por_records{
        width: 230px;
    }
    .por_expor{
        margin-left: 10px;
    }
}
</style>